<template>
    <div>
       <table class="table table-bordered " >
           <thead>
               <tr>
                   <td>id</td>
                   <td>酒店名称</td>
                   <td>酒店电话</td>
                   <td>酒店图片</td>
                   <td>酒店地址</td>
                   <td>酒店特色</td>
                   <td>时间</td>
                   <td>操作</td>
               </tr>

               <tr v-for="o in data" >
                   <td>{{ o.Id }}</td>
                   <td>{{ o.ShopName }}</td>
                   <td>{{ o.Phone.substring(0,3)+"****"+o.Phone.substring(8,4) }}</td>
                   <td><img :src="o.Photo" width="100" height="100" ></td>
                   <td>{{ o.Address }}</td>
                   <td>{{ o.TeSeName }}</td>
                   <td>{{ moment(o.CreateTime).format("yyyy-MM-DD") }}</td>
                   <td><input type="button" value="修改" class="btn btn-info " >
                       <input type="button" value="重置" class="btn btn-info "> </td>
               </tr>
           </thead>
       </table>
       <select name="" id="">
        <option value="0">请选择</option>
        <option :value="o.id" v-for="o in citys" >{{ o.name }}</option>
       </select>
    </div>
</template>

<script setup lang="ts">
import moment from 'moment';
import { ref } from 'vue';


    let data: any = ref([
  {
    Id: 1,
    ShopName: '北京如家酒店',
    Phone: '18888888888',
    Photo:
      'https://img0.baidu.com/it/u=2844943994,1968625551&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    Address: '北京昌平202',
    TeSeName: '豪华婚宴',
    CreateTime: '2022-09-20T15:32:09.244927',
    State: 1
  },
  {
    Id: 2,
    ShopName: '北京汉庭酒店',
    Phone: '18899988888',
    Photo:
      'https://img0.baidu.com/it/u=385906721,3322194213&fm=253&fmt=auto&app=120&f=JPEG?w=570&h=380',

    Address: '北京昌平201',
    TeSeName: '豪华婚宴',
    CreateTime: '2024-01-20T11:32:09.244927',
    State: 0
  },
  {
    Id: 3,
    ShopName: '北京花儿顿酒店',
    Phone: '18877788866',
    Photo:
      'https://img2.baidu.com/it/u=2116884723,4094686271&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400',
    Address: '北京昌平208',
    TeSeName: '豪华婚宴',
    CreateTime: '2021-12-20T11:32:09.244927',
    State: 1
  }
]);
let citys: any = ref([
  { id: 1, name: '北京' },
  { id: 2, name: '天津' },
  { id: 3, name: '上海' },
  { id: 4, name: '河北' },
  { id: 5, name: '山西' },
  { id: 6, name: '山东' }
]);
</script>

<style scoped>

</style>